<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Opener-RoundSelectList</title>
	<style>
		.mblTooltip.mblOpener DIV[label='Cancel'] {
			display: none;
		}
		.mblTooltip #header1 {
			width: 300px;
		}
		.mblOverlay#listPicker {
			height: 200px;
		}
	</style>
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, async: true"></script>

	<script type="text/javascript">
		var ringtone, listPicker, trim;
		require([
			"dojo/ready",			// ready
			"dojo/_base/html",		// dojo.byId
			"dojo/_base/lang",		// dojo.trim
			"dijit/registry",		// byId
			"dojox/mobile",			// This is a mobile app.
			"dojox/mobile/compat",		// This mobile app supports running on desktop browsers
			"dojox/mobile/parser",		// This mobile app uses declarative programming with fast mobile parser
			"dojox/mobile/deviceTheme",	// This mobile app automatically changes it's theme to match devices
			"dojox/mobile/Opener",
			"dojox/mobile/ScrollableView"
		], function(ready, html, lang, registry){
			ready(function(){
				ringtone = html.byId('ringtone');
				listPicker = registry.byId('listPicker');
				trim = lang.trim;
			});
		});
		var checkedItem = 'Marimba';

		function getSelectedRingtone(node, accept){
			if(accept === true){
				ringtone.value = checkedItem || '';
			}
		}
		function setSelectedRingtone(node){
		// NOOP
		}
		function onCheck(item, checked){
			setTimeout(function(){
				if(checked){
					checkedItem = trim(item.labelNode.innerText || item.labelNode.textContent || '');
				}
			}, 500);
		}
	</script>
</head>
<body style="visibility:hidden;">
	<table cellspacing="20" style="margin-top:100px;padding-bottom:1500px;z-index:9999;"><!-- scrollable for testing purposes -->
	<tr>
		<td style="text-align:right;font-weight:bold;z-index:9999;">Ringtone</td>
		<td><input id="ringtone" readOnly value="" placeholder="Select a ringtone"
			onclick="listPicker.show(this, ['above-centered','below-centered','after','before'])" /></td>
	</tr>
	</table>

	<!-- if onBlur returns !false, then the popup is closed when a click event is received away from the popup -->
	<!-- override user's custom z-index --> 
	<div id="listPicker" style="z-index:10000;" data-dojo-type="dojox.mobile.Opener" data-dojo-props="onHide:getSelectedRingtone, onShow:setSelectedRingtone, onBlur:function(){ return true; }">
		<h1 id="header1" dojoType="dojox.mobile.Heading" label="Ringtone">
			<span dojoType="dojox.mobile.ToolBarButton" label="Done" class="mblColorBlue" style="position:absolute;width:45px;right:0;"
				onclick="listPicker.hide(true)"></span>
			<span dojoType="dojox.mobile.ToolBarButton" label="Cancel" class="mblColorBlue" style="position:absolute;width:45px;left:0;"
				onclick="listPicker.hide(false)"></span>
		</h1>
		<div dojoType="dojox.mobile.ScrollableView" selected="true" height="auto">
			<ul id="list1" dojoType="dojox.mobile.RoundRectList" select="single" data-dojo-props="onCheckStateChanged:onCheck">
				<li id="item1" dojoType="dojox.mobile.ListItem" checked="true">
					Marimba
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Alarm
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Ascending
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Bark
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Bell Tower
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Blues
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Boing
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Crickets
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Digital
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Doorbell
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Duck
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Harp
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Motorcycle
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Old Car Horn
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Old Phone
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Piano Roll
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Pinball
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Robot
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Sci-Fi
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Sonar
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Strum
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Timba
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Time Passing
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Trill
				</li>
				<li dojoType="dojox.mobile.ListItem">
					Xylophone
				</li>
			</ul>
		</div>
	</div>
</body>
</html>
